<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        函数:  search函数   renderData函数  ==>封装的方法
        变化的变量:data tbody  button  input  ==>做成了属性
        把一个功能封装成  对象  或函数
        封装函数：
            把变化的数据  做成参数，如果需要函数的最终运行 就 return 返回结果，
        封装对象：
            把变量做成对象的属性；
            把函数变成对象的方法 (注意：this的引用的问题)
     -->

    <div>
        <input type="text" placeholder="请输入查询商品的名称">  <button>搜索</button>
    </div>
    <table>
        <thead>
            <tr>
                <td>编号</td>
                <td>产品名称</td>
                <td>产品价格</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    
    <script>    
        
        var data=[
            {   id:1,
                name:'华为',
                price:3000
            },
            {   id:2,
                name:'苹果',
                price:3400
            },
            {   id:3,
                name:'OPPO',
                price:2000
            },
            {   id:4,
                name:'vivo',
                price:4550
            },
            {   id:5,
                name:'小米',
                price:5000
            },
        ]

        var tbody=document.querySelector("tbody")
        renderData(data)
        var button=document.querySelector("button")
        var input=document.querySelector("input")
        button.onclick=function()
        {
            var pname=input.value
            var result=data.filter(function(value){
                if(value.name.indexOf(pname)>=0)  //根据indexOf方法判断有没有这个value.name
                {
                    return true  //如果存在了就返回true  //因为filter返回的是数组
                }else{
                    return false //否则为false
                }
            })
            tbody.innerHTML='';   //把原来tbody里面的html清空
            renderData(result)    //把筛选的结果重新写入tbody
        }
        function renderData(data)
        {
            data.forEach(function(value){
                var tr=document.createElement('tr')
                var td1=document.createElement("td")  
                    td1.innerText=value.id
                    tr.appendChild(td1)
                var td2=document.createElement("td")
                    td2.innerText=value.name
                    tr.appendChild(td2)
                var td3=document.createElement("td")
                    td3.innerText=value.price
                    tr.appendChild(td3)
                tbody.appendChild(tr)
            })
        }
    </script>
    
</body>
</html>